<template>
  <div ref="chartRef" style="min-height: 280px; min-width: 550px"></div>
</template>
<script lang="ts" setup>
  import { useECharts } from '/@/hooks/web/useECharts';
  import { ref, Ref } from 'vue';
  import { abnomalList } from '../api';
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const abnomalData = ref();

  (async () => {
    try {
      const response = await abnomalList({});
      abnomalData.value = response.records;
      // console.log('异常数据', abnomalData.value);
      // console.log('月份', abnomalData.value.month);
      setOptions({
        xAxis: {
          type: 'category',
          data: abnomalData.value.map((item) => item.month),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: abnomalData.value.map((item) => item.value),
            type: 'line',
          },
        ],
      });
    } catch (error) {
      console.log(error);
    }
  })();
</script>
<style scoped></style>
